<template>
	<view class="content">
		<view class="u-page">
			<view class="u-demo-block">
				<u--form labelPosition="left" :model="formData" ref="form1" :rules="rules" labelWidth="80">
					<text class="u-demo-block__title">基础信息</text>
					<view class="u-demo-block__content">
						<u-form-item label="标题" prop="title" borderBottom ref="item1">
							<u--input v-model="formData.title" border="none" placeholder="输入标题"></u--input>
						</u-form-item>
						<u-form-item label="区域" prop="region" borderBottom ref="item1">
							<picker mode="region" @change="regionChange">
								<view class="">{{formData.region}}</view>
							</picker>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="小区名称" prop="quart" borderBottom ref="item1">
							<u--input v-model="formData.quart" border="none" placeholder="输入小区名称"></u--input>
						</u-form-item>
						<u-form-item label="房源地址" prop="address" borderBottom @click="showCity" ref="item1">
							<u--input v-model="formData.address" disabled disabledColor="#ffffff" placeholder="请选择房源地址"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="房屋类型" prop="type" borderBottom @click="showType = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="formData.type" disabled disabledColor="#ffffff" placeholder="请选择房屋类型"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="电梯/楼梯" prop="isfloor" borderBottom
							@click="showisfloor = true; hideKeyboard()" ref="item1">
							<u--input v-model="formData.isfloor" disabled disabledColor="#ffffff" placeholder="请选择电梯/楼梯"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<view class="u-demo-block__content">
							<u-form-item label="一梯几户" prop="floornum" borderBottom ref="item1">
								<u--input v-model="formData.floornum" border="none" placeholder="输入户数"></u--input>
							</u-form-item>
						</view>
						<u-form-item label="房屋装修" prop="renovation" borderBottom
							@click="showRenovation = true; hideKeyboard()" ref="item1">
							<u--input v-model="formData.renovation" disabled disabledColor="#ffffff"
								placeholder="请选择房屋装修" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="房屋朝向" prop="orientation" borderBottom
							@click="showOrientation = true; hideKeyboard()" ref="item1">
							<u--input v-model="formData.orientation" disabled disabledColor="#ffffff"
								placeholder="请选择房屋朝向" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="建造年份" prop="build_year" ref="item1">
							<picker mode="date" fields="year" @change="buildYearChange">
								<view class="">{{formData.build_year}}年</view>
							</picker>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>

					</view>
					<text class="u-demo-block__title block_title">出租信息</text>
					<view class="u-demo-block__content">
						<u-form-item label="租金" prop="money" borderBottom ref="item1">
							<u--input v-model="formData.money" border="none" placeholder="输入租金/元月"></u--input>
						</u-form-item>
						<u-form-item label="户型" prop="room" borderBottom ref="item1"
							style="display: flex;flex-direction: row;">
							<view class="block" style="display: flex;flex-direction: row;">
								<u-input v-model="formData.room" border="none" placeholder="几室" />
								<u-input v-model="formData.office" border="none" placeholder="几厅" />
								<u-input v-model="formData.guard" border="none" placeholder="几卫" />
							</view>
						</u-form-item>
						<u-form-item label="面积" prop="area" borderBottom ref="item1">
							<u--input v-model="formData.area" border="none" placeholder="输入面积/平米"></u--input>
						</u-form-item>
						<u-form-item label="楼层" prop="floot_type" ref="item1"
							style="display: flex;flex-direction: row;">
							<view class="block" style="display: flex;flex-direction: row;">
								<view class="" @click="showFloor = true; hideKeyboard()">
									<u-input v-model="formData.floor_type" border="none" disabled
										disabledColor="#ffffff" placeholder="选择楼层" />
								</view>
								<view class="" v-if="ShowFloorInput">
									<u-input v-model="formData.floor_line" border="none" placeholder="几楼" />
								</view>
								<view class="">
									<u-input v-model="formData.count_floor" border="none" placeholder="共几楼" />
								</view>
							</view>
						</u-form-item>
					</view>
					<text class="u-demo-block__title block_title"></text>
					<view class="u-demo-block__content">
						<u-form-item label="其他描述" prop="intro" borderBottom ref="item1">
							<u--textarea placeholder="请输入其他描述" v-model="formData.intro" count></u--textarea>
						</u-form-item>
					</view>
					<text class="u-demo-block__title block_title"></text>
					<view class="u-demo-block__content">
						<u-form-item label="上传图片" prop="intro" borderBottom ref="item1">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="15"></u-upload>
						</u-form-item>
						<u-form-item label="上传房产证(必填)" v-if="is_fc == 1" prop="intro" borderBottom ref="item1">
							<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
								:maxCount="1"></u-upload>
						</u-form-item>
						<u-form-item label="上传房产证(非必填)" v-else prop="intro" borderBottom ref="item1">
							<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
								:maxCount="1"></u-upload>
						</u-form-item>
						<u-form-item label="上传户型图(必填)" v-if="is_hx == 1" prop="intro" borderBottom ref="item1">
							<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
								:maxCount="1"></u-upload>
						</u-form-item>
						<u-form-item label="上传户型图(非必填)" v-else prop="intro" borderBottom ref="item1">
							<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
								:maxCount="1"></u-upload>
						</u-form-item>
					</view>
					<text class="u-demo-block__title block_title"></text>
					<view class="u-demo-block__content">
						<u-form-item label="来源" prop="source" borderBottom @click="showSource = true; hideKeyboard()"
							ref="item1">
							<u--input v-model="formData.source" disabled disabledColor="#ffffff" placeholder="请选择房源来源"
								border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="姓名" prop="relname" borderBottom ref="item1">
							<u--input v-model="formData.relname" border="none" placeholder="输入姓名"></u--input>
						</u-form-item>
						<u-form-item label="电话" prop="mobile" borderBottom ref="item1">
							<u--input v-model="formData.mobile" border="none" placeholder="输入电话"></u--input>
						</u-form-item>
						<u-form-item label="微信" prop="wx" borderBottom ref="item1">
							<u--input v-model="formData.wx" border="none" placeholder="输入微信"></u--input>
						</u-form-item>
					</view>

					<text class="u-demo-block__title block_title"></text>
					<view class="money" style="display: none;">
						支付金额<text>￥:{{priceMoney}}</text>
					</view>
					<u-collapse>
						<u-collapse-item title="查看《房产小程序使用协议》" name="Docs guide">
							<text class="u-collapse-content">{{xieyi}}</text>
						</u-collapse-item>
					</u-collapse>
					<view class="ase">
						<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px',marginLeft:'10px'}"
								v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
								@change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>
					<u-button type="primary" text="提交" :disabled="btnDisabled" customStyle="margin-top: 50px"
						@click="submit">
					</u-button>
				</u--form>

				<!-- // 弹出层 -->
				<u-action-sheet :show="showType" :actions="actionType" title="请选择房屋类型" @close="showType = false"
					@select="selectType">
				</u-action-sheet>
				<u-action-sheet :show="showisfloor" :actions="actionisfloor" title="请选择电梯/楼梯"
					@close="showisfloor = false" @select="selectisfloor">
				</u-action-sheet>
				<u-action-sheet :show="showRenovation" :actions="actionRenovation" title="请选择房屋装修"
					@close="showRenovation = false" @select="selectRenovation">
				</u-action-sheet>
				<u-action-sheet :show="showOrientation" :actions="actionOrientation" title="请选择房屋朝向"
					@close="showOrientation = false" @select="selectOrientation">
				</u-action-sheet>
				<u-action-sheet :show="showFloor" :actions="actionFloor" title="请选择楼层" @close="showFloor = false"
					@select="selectFloor">
				</u-action-sheet>
				<u-action-sheet :show="showSource" :actions="actionSource" title="请选择房源来源" @close="showSource = false"
					@select="selectSource">
				</u-action-sheet>
				<u-action-sheet :show="showNumber" :actions="actionNumber" title="请选择置顶天数" @close="showNumber = false"
					@select="selectNumber">
				</u-action-sheet>
			</view>
		</view>
		<u-overlay :show="showModel" @click="showModel = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image src="/static/money-1.png" mode="" class="rect_bg" @click="btnConfirm"></image>
					<view class="msgcontent">{{content}}</view>
					<text class="left" @click="btnConfirm">发布会员</text>
					<!-- <text class="right" @click="btnConfirm">浏览会员</text> -->
					<image src="/static/close.png" mode="" class="rect-close" @click="showModel = false"></image>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					title: '',
					region: '请选择区域',
					quart: '',
					type: '',
					renovation: '',
					build_year: '请选择建造',
					money: '',
					room: '',
					office: '',
					guard: '',
					area: '',
					floor_type: '', //选择楼层
					floor: '',
					count_floor: '',
					intro: '',
					source: '',
					relname: '',
					mobile: '',
					wx: '',
					num_number: [],
					num_money: '',
					switch: false,
					address: '',
					orientation: '', //朝向
					floor_line: '',
					isfloor: '',
					floornum: ''

				},
				showInput: false,
				showType: false,
				actionType: [{
					name: '住宅',
				}, {
					name: '公寓',
				}, {
					name: '别墅',
				}, {
					name: '写字楼',
				}, {
					name: '商铺',
				}, {
					name: '厂房',
				}, {
					name: '商住一体',
				}],
				showisfloor: false,
				actionisfloor: [{
					id: 1,
					name: '电梯'
				}, {
					id: 2,
					name: '楼梯'
				}],
				showOrientation: false,
				actionOrientation: [{
					name: '南北(通透)'
				}, {
					name: '东西'
				}, {
					name: '东户(边户)'
				}, {
					name: '西户(边户)'
				}, {
					name: '朝南'
				}, {
					name: '朝北'
				}, {
					name: '其他'
				}],
				showRenovation: false,
				actionRenovation: [{
					name: '毛坯'
				}, {
					name: '普通'
				}, {
					name: '中档'
				}, {
					name: '精装'
				}, {
					name: '豪华'
				}],
				showFloor: false,
				actionFloor: [{
					name: '高'
				}, {
					name: '中'
				}, {
					name: '低'
				}, {
					name: '自定义楼层'
				}],
				showSource: false,
				actionSource: [{
					name: '个人房源'
				}, {
					name: '中介房源'
				}],
				ShowFloorInput: false,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				showNumber: false,
				actionNumber: [],
				address_lat: '',
				address_lng: '',
				imgUrl: [],
				priceMoney: 0,
				rules: {
					title: {
						type: 'string',
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					},
					region: {
						type: 'string',
						required: true,
						message: '请选择区域',
						trigger: ['blur', 'change']
					},
					quart: {
						type: 'string',
						required: true,
						message: '请输入小区名称',
						trigger: ['blur', 'change']
					},
					type: {
						type: 'string',
						required: true,
						message: '请选择房屋类型',
						trigger: ['blur', 'change']
					},
					renovation: {
						type: 'string',
						required: true,
						message: '请选择装修情况',
						trigger: ['blur', 'change']
					},
					orientation: {
						type: 'string',
						required: true,
						message: '请选择朝向',
						trigger: ['blur', 'change']
					},
					build_year: {
						type: 'number',
						required: true,
						message: '请选择建造年份',
						trigger: ['blur', 'change']
					},
					money: {
						type: 'float',
						required: true,
						message: '请输入售价金额/万元',
						trigger: ['blur', 'change']
					},
					room: {
						type: 'number',
						required: true,
						message: '请输入几室',
						trigger: ['blur', 'change']
					},
					office: {
						type: 'number',
						required: true,
						message: '请输入几厅',
						trigger: ['blur', 'change']
					},
					guard: {
						type: 'number',
						required: true,
						message: '请输入几卫',
						trigger: ['blur', 'change']
					},
					area: {
						type: 'float',
						required: true,
						message: '请输入面积',
						trigger: ['blur', 'change']
					},
					floor_type: {
						type: 'float',
						required: true,
						message: '请输入几卫',
						trigger: ['blur', 'change']
					}

				},
				title: '提示',
				content: '',
				showModel: false,
				is_fc: 0,
				is_hx: 0,
				xieyi: '',
				radiolist1: [{
					name: "同意"
				}, {
					name: "不同意"
				}],
				btnDisabled: true
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				let that = this;
				that.http("applet_house_getHouseConfig").then(res => {
					if (res.ec === 200) {

						that.actionType = res.data.type
						that.priceMoney = res.data.money
						that.is_fc = res.data.is_fc
						that.is_hx = res.data.is_hx
						that.xieyi = res.data.xieyi
					}
				})
			},
			regionChange(e) {
				let address = e.detail.value;
				this.formData.region = address[0] + "," + address[1] + "," + address[2]
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			selectisfloor(e) {
				this.formData.isfloor = e.name;
				this.$refs.form1.validateField('isfloor')
			},
			selectType(e) {
				this.formData.type = e.name;
				this.$refs.form1.validateField('type')
			},
			selectRenovation(e) {
				this.formData.renovation = e.name;
				this.$refs.form1.validateField('renovation')
			},
			buildYearChange(e) {
				let year = e.detail.value;
				this.formData.build_year = year;
			},
			selectFloor(e) {
				console.log(e)
				let floor = e.name;
				if (floor == '自定义楼层') {
					this.ShowFloorInput = true;
				}
				this.formData.floor_type = floor
			},
			selectSource(e) {
				console.log(e)
				let source = e.name;

				this.formData.source = source
			},
			selectNumber(e) {
				let num_number = e.name;
				this.formData.num_number = num_number
			},
			switchChange(e) {
				console.log(e)
				this.showInput = e;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					let item = this[`fileList${event.name}`][fileListLen]
					const data = JSON.parse(result);
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: getApp().globalData.root_url + data.data.path
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this;
				const app = getApp().globalData.base_url;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: app + '&map=applet_img_upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						success: (res) => {
							console.log(res.data)
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			selectOrientation(e) {
				let orientation = e.name
				this.formData.orientation = orientation
			},
			// 房源地址获取
			showCity() {
				let that = this
				uni.chooseLocation({
					success(res) {
						console.log(res)
						that.formData.address = res.address;
						that.formData.address_lat = String(res.latitude);
						that.formData.address_lng = String(res.longitude)
					}
				})
			},
			// 提交整个表单
			submit() {
				console.log(this.fileList1)
				let that = this;
				let img_files = [];
				if (that.fileList1.length != 0) {
					that.fileList1.forEach(function(item, index) {
						img_files.push(item.url)
					})
				}
				//判断房产
				if (this.fc == 1) {
					if (that.fileList2.length == 0) {
						return uni.$u.toast('请上传房产证')
					}
				}
				if (this.hx == 1) {
					if (that.fileList3.length == 0) {
						return uni.$u.toast('请上传户型图')
					}
				}
				that.$refs.form1.validate().then(res => {
					that.http("applet_house_add", {
						house_type: 2,
						title: this.formData.title,
						city: this.formData.region,
						community_name: this.formData.quart,
						address: this.formData.address,
						address_lat: this.formData.address_lat,
						address_lng: this.formData.address_lng,
						house_address: this.formData.address,
						type: this.formData.type,
						isfloor: this.formData.isfloor,
						floornum: this.formData.floornum,
						renovation: this.formData.renovation,
						direction: this.formData.orientation,
						establish_year: this.formData.build_year,
						money: this.formData.money,
						room: this.formData.room,
						office: this.formData.office,
						guard: this.formData.guard,
						area: this.formData.area,
						floor: this.formData.floor_type,
						floor_line: this.formData.floor_line,
						count_floor: this.formData.count_floor,
						mark: this.formData.intro,
						source: this.formData.source,
						relname: this.formData.relname,
						mobile: this.formData.mobile,
						wx: this.formData.wx,
						is_book: this.formData.switch ? '1' : '0',
						book_day: this.formData.num_number,
						book_money: this.formData.num_money,
						img_file: img_files,
						fc: that.fileList2,
						hx: that.fileList3
					}).then(ret => {
						console.log(ret)
						if (ret.ec == 999) {
							console.log("提示错误")
							that.showModel = true
							that.content = ret.em
							return false;
						}
						if (ret.ec == 200) {
							uni.showToast({
								title: "发布成功",
								icon: 'success',
								success() {
									setTimeout(function() {
										uni.navigateBack({

										})
									}, 2000)
								}
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请完善信息')
				})
			},
			btnConfirm() {
				let that = this;
				uni.navigateTo({
					url: '/pages/mymember/mymember',
					success() {
						that.showModel = false
					}
				})
			},
			btnCancel() {
				this.showModel = false;
			},
			radioChange(e) {
				console.log(e)
			},
			groupChange(n) {
				console.log('groupChange', n);
				if (n == "同意") {
					this.btnDisabled = false;
				} else {
					this.btnDisabled = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 523upx;
		height: 502upx;
		position: relative;

		.rect_bg {
			width: 100%;
			height: 100%;
		}

		.left {
			position: absolute;
			bottom: 30rpx;
			left: 200rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.right {
			position: absolute;
			bottom: 30rpx;
			right: 75rpx;
			color: #fff;
			font-size: 28rpx;
		}

		.rect-close {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 65rpx;
			right: 19rpx;
		}
	}

	.msgcontent {
		position: absolute;
		margin-top: -120px;
		font-size: 20px;
		font-weight: bold;
		color: #635b5b;
		text-align: center;
		width: 90%;
		margin-left: 15px;
	}

	.u-page {
		width: 94%;
		margin: 0 auto;
	}

	.u-demo-block__title {
		width: 100%;
		display: flex;
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #888;
	}

	.block_title {
		border-top: 20rpx solid #f8f8f8;
	}

	.input_inline {
		width: 33%;
	}

	.money {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-right: 20rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		color: #888;

		text {
			font-size: 34rpx;
			color: #F44336;
		}
	}

	.ase {
		display: flex;
		flex-direction: row;
		margin: 20rpx;
	}
</style>
